<template>
  <div class="single">
    <el-row>
      <el-col :span="24">
        <el-form
          :model="formModel"
          :rules="rules"
          ref="formModel"
          label-width="110px"
          class="demo-formModel"
        >
         
          <!-- 通讯地址 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="通讯地址" prop="education">
                  <el-input v-model="formModel.academic" placeholder="请输入通讯地址" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="formModel.phone" placeholder="请输入联系电话" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机" prop="phone2">
                <el-input v-model="formModel.phone2" placeholder="请输入手机" class="el_select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- Email -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="Email" prop="email">
                  <el-input v-model="formModel.email" placeholder="请输入Email" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="其他联系方式（QQ）" prop="qq">
                <el-input v-model="formModel.qq" placeholder="请输入其他联系方式（QQ）" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            
          </el-row>

          <el-row class="btns">
            <el-col :span="24"> 
              <el-form-item>
              <el-button type="primary" @click="submitForm('formModel')"
                >添加</el-button
              >
              <el-button @click="resetForm('formModel')">重置</el-button>
          </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name:"contentinfo",
  data() {
    return {
      formModel: {
        address:"",
        phone:"",
        phone2:"",
        email:"",
        qq:"",
      },
      rules: {
        address: [
          { required: true, message: "请输入通讯地址", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        phone2: [
          { required: true, message: "请输入手机", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入Email", trigger: "blur" },
        ],
        qq: [
          { required: true, message: "请输入其他联系方式（QQ）", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>


<style >
.single {
  padding: 0.5rem;
}
.el_select {
  width: 15rem;
}
.btns{
  padding-left: 22rem;
}
</style>

